Correct height calculation in the sections by MVilaH · Pull Request #1105 · simonbengtsson/jsPDF-AutoTable

MVilaH · 2026-01-18T14:07:41Z

This code corrects the calculation of the height of the sections when using rowSpan in them since the original code oversized the height of the sections with the dimension of the rows that do not have rowSpan which causes an anticipated page break.

recalculate the dimensions of the sections to return their exact size if you have to use rowSpan in head or foot or both since otherwise it increases the virtual size of the table and creates a new page before you have arrived has occupied the space established in the margins of the sheet.

optimization

improve code readability and efficiency.

MVilaH · 2026-01-25T05:20:43Z

import { jsPDF } from "jspdf";
import { applyPlugin } from "jspdf-autotable";

applyPlugin(jsPDF);

const doc = new jsPDF({
orientation: "p",
unit: "mm",
format: "a4"
});
const body = [
[
{
content: "",
colSpan: 2,
styles: {
halign: "center",
valign: "middle"
}
},
{
content: "",
colSpan: 5,
styles: {
//cellWidth: 20,
halign: "center",
valign: "middle"
}
},
{
content: "",
colSpan: 12,
styles: {
//cellWidth: 50,
halign: "left",
valign: "middle"
}
},
{
content: "",
colSpan: 2,
styles: {
halign: "center",
valign: "middle"
}
},
{
content: "",
colSpan: 2,
styles: {
halign: "center",
valign: "middle"
}
},
{
content: "",
colSpan: 4,
styles: {
halign: "center",
valign: "middle"
}
},
{
content: "",
colSpan: 4,
styles: {
halign: "center",
valign: "middle"
}
},
{
content: "",
colSpan: 4,
styles: {
halign: "center",
valign: "middle"
}
},
{
content: "",
colSpan: 4,
styles: {
halign: "center",
valign: "middle"
}
},
{
content: "",
colSpan: 4,
styles: {
halign: "right",
valign: "middle"
}
},
{
content: "",
colSpan: 2,
styles: {
halign: "center",
valign: "middle"
}
},
{
content: "",
colSpan: 5,
styles: {
halign: "center",
valign: "middle"
}
}
]
];

for (let i = 0; i < 41; i++) {
let r = structuredClone(body[0]);

body.push(r);
}
doc.autoTable({
theme: "plain",
margin: 10,
styles: {
lineColor: [0, 0, 0],
lineWidth: 0.5,
fontSize: 8,
cellPadding: 1
},
columnStyles: columnStyles(50, 3.8),
head: [
[
{
content: "No.",
colSpan: 2,
styles: {
halign: "center",
valign: "middle"
}
},
{
content: "CÓDIGO",
colSpan: 5,
styles: {
halign: "center",
valign: "middle"
}
},
{
content: "DESCRIPCIÓN",
colSpan: 12,
styles: {
halign: "left",
valign: "middle"
}
},
{
content: "CAT",
colSpan: 2,
styles: {
halign: "center",
valign: "middle"
}
},
{
content: "U/M",
colSpan: 2,
styles: {
halign: "center",
valign: "middle"
}
},
{
content: "CANT",
colSpan: 4,
styles: {
halign: "center",
valign: "middle"
}
},
{
content: "PRECIO",
colSpan: 4,
styles: {
halign: "center",
valign: "middle"
}
},
{
content: "REC. O DES. COMERC.",
colSpan: 4,
styles: {
halign: "center",
valign: "middle"
}
},
{
content: "PRECIO UNITARIO TOTAL",
colSpan: 4,
styles: {
halign: "center",
valign: "middle"
}
},
{
content: "IMPORTE",
colSpan: 6,
styles: {
halign: "right",
valign: "middle"
}
},
{
content: "EXISTENCIA",
colSpan: 5,
styles: {
halign: "center",
valign: "middle"
}
}
]
],
body,
foot: [
[
{
content: "TOTAL",
colSpan: 39,
styles: {
halign: "center",
valign: "middle"
}
},
{
content: "",
colSpan: 4,
styles: {
halign: "right",
valign: "middle"
}
},
{
content: "",
colSpan: 2,
styles: {
halign: "center",
valign: "middle"
}
},
{
content: "",
colSpan: 11,
styles: {
halign: "center",
valign: "middle"
}
}
],
[
{
content: "ENTREGADO POR:",
colSpan: 13,
styles: {
halign: "left",
valign: "top",
minCellHeight: 7.74
}
},
{
content: "RECIBIDO-CLIENTE:",
colSpan: 13,
styles: {
halign: "left",
valign: "top"
}
},
{
content: "RECIBIDO-ALMACÉN(DEPÓSITO):",
colSpan: 13,
styles: {
halign: "left",
valign: "top"
}
},
{
content: "ANOTADO POR:",
colSpan: 11,
styles: {
halign: "left",
valign: "top"
}
}
],
[
{
content: "NOMBRE Y APELLIDOS:",
colSpan: 13,
rowSpan: 2,
styles: {
halign: "left",
valign: "top"
}
},
{
content: "NOMBRE Y APELLIDOS:",
colSpan: 13,
rowSpan: 2,
styles: {
halign: "left",
valign: "top"
}
},
{
content: "NOMBRE Y APELLIDOS:",
colSpan: 13,
rowSpan: 2,
styles: {
halign: "left",
valign: "top"
}
},
{
content: "T. ESTIBA",
colSpan: 5,

    styles: {
      halign: "center",
      valign: "top"
    }
  },
  {
    content: "SUBMAY. INV.\n",
    colSpan: 6,
    styles: {
      halign: "center",
      valign: "top"
    }
  }
],
[
  {
    content: "CONTAB.:",
    colSpan: 5,
    rowSpan: 3,
    styles: {
      halign: "left",
      valign: "top"
    }
  },
  {
    content: "RECIBIDO:\n",
    colSpan: 6,
    styles: {
      halign: "left",
      valign: "top"
    }
  }
],
[
  {
    content: "FIRMA:",
    colSpan: 7,
    rowSpan: 2,
    styles: {
      halign: "left",
      valign: "top"
    }
  },
  {
    content: "D",
    colSpan: 2,

    styles: { halign: "center", valign: "middle" }
  },
  {
    content: "M",
    colSpan: 2,

    styles: { halign: "center", valign: "middle" }
  },
  {
    content: "A",
    colSpan: 2,

    styles: { halign: "center", valign: "middle" }
  },
  {
    content: "FIRMA:",
    colSpan: 7,
    rowSpan: 2,
    styles: {
      halign: "left",
      valign: "top"
    }
  },
  {
    content: "D",
    colSpan: 2,

    styles: { halign: "center", valign: "middle" }
  },
  {
    content: "M",
    colSpan: 2,

    styles: { halign: "center", valign: "middle" }
  },
  {
    content: "A",
    colSpan: 2,

    styles: { halign: "center", valign: "middle" }
  },
  {
    content: "FIRMA:",
    colSpan: 7,
    rowSpan: 2,
    styles: {
      halign: "left",
      valign: "top"
    }
  },
  {
    content: "D",
    colSpan: 2,

    styles: { halign: "center", valign: "middle" }
  },
  {
    content: "M",
    colSpan: 2,

    styles: { halign: "center", valign: "middle" }
  },
  {
    content: "A",
    colSpan: 2,

    styles: { halign: "center", valign: "middle" }
  },
  {
    content: "D",
    colSpan: 2,

    styles: { halign: "center", valign: "middle" }
  },
  {
    content: "M",
    colSpan: 2,

    styles: { halign: "center", valign: "middle" }
  },
  {
    content: "A",
    colSpan: 2,

    styles: { halign: "center", valign: "middle" }
  }
],
[
  {
    content: "",
    colSpan: 2,

    styles: { halign: "center", valign: "middle" }
  },
  {
    content: "",
    colSpan: 2,

    styles: { halign: "center", valign: "middle" }
  },
  {
    content: "",
    colSpan: 2,

    styles: { halign: "center", valign: "middle" }
  },
  {
    content: "",
    colSpan: 2,

    styles: { halign: "center", valign: "middle" }
  },
  {
    content: "",
    colSpan: 2,

    styles: { halign: "center", valign: "middle" }
  },
  {
    content: "",
    colSpan: 2,

    styles: { halign: "center", valign: "middle" }
  },
  {
    content: "",
    colSpan: 2,

    styles: { halign: "center", valign: "middle" }
  },
  {
    content: "",
    colSpan: 2,

    styles: { halign: "center", valign: "middle" }
  },
  {
    content: "",
    colSpan: 2,

    styles: { halign: "center", valign: "middle" }
  },
  {
    content: "",
    colSpan: 2,

    styles: { halign: "center", valign: "middle" }
  },
  {
    content: "",
    colSpan: 2,

    styles: { halign: "center", valign: "middle" }
  },
  {
    content: "",
    colSpan: 2,

    styles: { halign: "center", valign: "middle" }
  }
]

]
});

function columnStyles(d, w) {
const columnStyles = {};

for (let i = 0; i < d; i++) {
columnStyles[i] = { cellWidth: w };
}
return columnStyles;
}

export default doc;

Si ejecutas este código con el código original la página se rompe antes de las 41 filas si no me equivoco por lo menos las 3 últimas filas se van a la página siguiente por el error de cálculo de la altura de las secciones

MVilaH · 2026-01-25T14:12:19Z

Esta es la imagen del resultado del código anterior con el código original

MVilaH · 2026-01-25T14:22:21Z

Y este es el mismo documento generado con los arreglos realizados en este pull request

MVilaH · 2026-01-25T14:25:56Z

if you count the number of rows in the body you will realize that it is the same amount but the result completely different.

MVilaH · 2026-01-25T14:33:07Z

By the way this error is fixed pull request #1106

MVilaH added 3 commits January 14, 2026 22:33

Update

bc810f6

optimization

Update

c77b92c

improve code readability and efficiency.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Correct height calculation in the sections#1105

Correct height calculation in the sections#1105
MVilaH wants to merge 3 commits intosimonbengtsson:mainfrom
MVilaH:patch-2

MVilaH commented Jan 18, 2026

Uh oh!

MVilaH commented Jan 25, 2026

Uh oh!

MVilaH commented Jan 25, 2026

Uh oh!

MVilaH commented Jan 25, 2026

Uh oh!

MVilaH commented Jan 25, 2026

Uh oh!

MVilaH commented Jan 25, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

MVilaH commented Jan 18, 2026

Uh oh!

MVilaH commented Jan 25, 2026

Uh oh!

MVilaH commented Jan 25, 2026

Uh oh!

MVilaH commented Jan 25, 2026

Uh oh!

MVilaH commented Jan 25, 2026

Uh oh!

MVilaH commented Jan 25, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant